<script setup>
import { ref, computed, onMounted } from 'vue'
import { useSettingsStore } from '../../stores/settingsStore'
import { useCategoryStore } from '../../stores/categoryStore'

const settingsStore = useSettingsStore()
const categoryStore = useCategoryStore()

// 设置表单
const settingsForm = ref({
  theme: 'light',
  defaultView: 'today',
  defaultCategory: null,
  reminderEnabled: true
})

// 获取分类列表
const categories = computed(() => categoryStore.sortedCategories)

// 初始化设置
onMounted(async () => {
  await categoryStore.loadCategories()
  await settingsStore.loadSettings()
  
  // 更新表单
  settingsForm.value = {
    theme: settingsStore.theme,
    defaultView: settingsStore.defaultView,
    defaultCategory: settingsStore.defaultCategory,
    reminderEnabled: settingsStore.reminderEnabled
  }
})

// 保存设置
const saveSettings = () => {
  settingsStore.updateSettings(settingsForm.value)
  
  // 显示保存成功提示
  showSnackbar.value = true
}

// 视图选项
const viewOptions = [
  { value: 'today', title: '今日任务', icon: 'mdi-calendar-today' },
  { value: 'all', title: '全部任务', icon: 'mdi-calendar-month' },
  { value: 'calendar', title: '日历视图', icon: 'mdi-calendar' },
]

// 主题选项
const themeOptions = [
  { value: 'light', title: '浅色', icon: 'mdi-weather-sunny' },
  { value: 'dark', title: '深色', icon: 'mdi-weather-night' },
  { value: 'system', title: '跟随系统', icon: 'mdi-theme-light-dark' },
]

// 显示保存成功提示
const showSnackbar = ref(false)
</script>

<template>
  <div class="settings-view">
    <div class="page-header mb-6">
      <h1 class="text-h4 mb-1">设置</h1>
      <div class="text-subtitle-1 text-medium-emphasis">
        个性化您的Todo应用
      </div>
    </div>
    
    <v-card>
      <v-card-text>
        <v-form @submit.prevent="saveSettings">
          <!-- 主题设置 -->
          <div class="setting-section mb-4">
            <h2 class="text-h6 mb-2">外观</h2>
            
            <v-radio-group
              v-model="settingsForm.theme"
              label="主题"
              class="mb-3"
            >
              <v-radio
                v-for="option in themeOptions"
                :key="option.value"
                :value="option.value"
                :label="option.title"
              >
                <template v-slot:label>
                  <div class="d-flex align-center">
                    <v-icon :icon="option.icon" class="mr-2"></v-icon>
                    {{ option.title }}
                  </div>
                </template>
              </v-radio>
            </v-radio-group>
          </div>
          
          <!-- 默认视图设置 -->
          <div class="setting-section mb-4">
            <h2 class="text-h6 mb-2">行为</h2>
            
            <v-select
              v-model="settingsForm.defaultView"
              label="默认视图"
              :items="viewOptions"
              item-title="title"
              item-value="value"
              class="mb-3"
            >
              <template v-slot:selection="{ item }">
                <div class="d-flex align-center">
                  <v-icon :icon="item.raw.icon" class="mr-2"></v-icon>
                  {{ item.raw.title }}
                </div>
              </template>
              
              <template v-slot:item="{ item, props }">
                <v-list-item
                  v-bind="props"
                  :title="item.raw.title"
                >
                  <template v-slot:prepend>
                    <v-icon :icon="item.raw.icon"></v-icon>
                  </template>
                </v-list-item>
              </template>
            </v-select>
            
            <v-select
              v-model="settingsForm.defaultCategory"
              label="默认分类"
              :items="categories"
              item-title="name"
              item-value="id"
              clearable
              class="mb-3"
            >
              <template v-slot:selection="{ item }">
                <div class="d-flex align-center" v-if="item && item.raw">
                  <v-icon
                    :color="item.raw.color"
                    :icon="item.raw.icon"
                    class="mr-2"
                  ></v-icon>
                  {{ item.raw.name }}
                </div>
              </template>
              
              <template v-slot:item="{ item, props: slotProps }">
                <v-list-item
                  v-bind="slotProps"
                  :title="item.raw.name"
                >
                  <template v-slot:prepend>
                    <v-icon :color="item.raw.color">{{ item.raw.icon }}</v-icon>
                  </template>
                </v-list-item>
              </template>
            </v-select>
          </div>
          
          <!-- 提醒设置 -->
          <div class="setting-section mb-4">
            <h2 class="text-h6 mb-2">提醒</h2>
            
            <v-switch
              v-model="settingsForm.reminderEnabled"
              label="启用提醒通知"
              hide-details
              class="mb-3"
            ></v-switch>
          </div>
          
          <!-- 关于信息 -->
          <div class="setting-section mb-4">
            <h2 class="text-h6 mb-2">关于</h2>
            
            <div class="text-body-1 mb-1">Todo应用 v1.0.0</div>
            <div class="text-body-2 text-medium-emphasis">
              基于Tauri + Vue3 + Vuetify开发的Todo应用
            </div>
          </div>
        </v-form>
      </v-card-text>
      
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" @click="saveSettings">保存设置</v-btn>
      </v-card-actions>
    </v-card>
    
    <!-- 保存成功提示 -->
    <v-snackbar
      v-model="showSnackbar"
      :timeout="2000"
      color="success"
    >
      设置已保存
    </v-snackbar>
  </div>
</template>

<style scoped>
.settings-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

.setting-section {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 16px;
}

.setting-section:last-child {
  border-bottom: none;
}
</style> 